<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">教师</el-breadcrumb-item>
      <el-breadcrumb-item>校外课题实践</el-breadcrumb-item>
      <el-breadcrumb-item>课程安排</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">校外实践课题课程安排</h2>
    </div>

    <div style="margin: 3% 5% 3% 5%;">

      <!-- 表格1 -->
      <el-table :data="mySchema" height="550" style="width: 100%; margin-top: 10px;">
        <el-table-column prop="onloadDate" label="时间" :formatter="formatDate" />
        <el-table-column prop="courseName" label="实践课程" />
        <el-table-column prop="teachName" label="任课老师" />
        <el-table-column prop="majorName" label="专业名称" />
        <el-table-column prop="className" label="班级" />
        <el-table-column fixed="right" label="详情" width="120">
          <template #default="scope">
            <el-button link type="primary" @click="downSchema(scope.row.courseId)" size="small">课程大纲</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


  </div>
</template>
<script setup>
import { ArrowRight, Calendar, Search, Plus } from '@element-plus/icons-vue'
import { ref, onBeforeMount } from 'vue'
import requests from '@/api/ajax';
//   挂载前进行
onBeforeMount(() => {
  //初始显示老师所有的教学大纲
  const asd = requests({ url: "/outer/practicalTaskVos", method: "get", }).then(res => {
    //存储用户信息到浏览器toke
    const abc = res.rdata
    mySchema.value = abc

  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });
})

//教师所有教学大纲的存放地
const mySchema = ref([{
  practicalId: '',
  classId: "",
  className: "",
  adviserId: '',
  adviserName: "",
  teachId: '',
  teachName: "",
  practicalType: '',
  onloadDate: "",
  courseSchema: '',
  planId: '',
  courseId: '',
  courseName: "",
  startDate: '',
  majorName: "",
  enrolDate: ""

}])

//筛选大纲时间
const courseDate = [
  {
    value: 'Option1',
    label: '2019年6月',
  },
  {
    value: 'Option2',
    label: '2019年12月',
  },
  {
    value: 'Option3',
    label: '2020年6月',
  },
  {
    value: 'Option4',
    label: '2020年12月',
  },
]

// 筛选专业类型
const majorOptions = [
  {
    value: 'Option1',
    label: '大数据科学与技术系',
  },
  {
    value: 'Option2',
    label: '互联网应用开发与优化',
  },
  {
    value: 'Option3',
    label: '金融方向',
  },
]

// 筛选课程类型
const courseOptions = [
  {
    value: 'Option1',
    label: 'RB软工互191',
  },
  {
    value: 'Option2',
    label: 'RB软工互192',
  },
  {
    value: 'Option3',
    label: 'RB软工互193',
  },
  {
    value: 'Option4',
    label: 'RB软工互194',
  },
]


//搜索框绑定的数据
const inputSearch = ref('')

//日期筛选绑定值
const selectDate = ref('')

//班级筛选绑定值
const selectMajor = ref('')

//班级筛选绑定值
const selectClass = ref('')

//将表格中的实践规范为YY-MM-DD
function formatDate(row, column, cellValue, index) {
  let format = 'YYYY-mm-dd'
  let date = new Date(cellValue);
  const dataItem = {
    'Y+': date.getFullYear().toString(),
    'm+': (date.getMonth() + 1).toString(),
    'd+': date.getDate().toString(),
  }
  Object.keys(dataItem).forEach((item) => {
    const ret = new RegExp(`(${item})`).exec(format);
    if (ret) {
      format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
    }
  });
  return format
}

function downSchema(courseId) {
  const getReport = requests({ url: "/preview/practiceCourse/" + courseId, method: "get", responseType: 'blob', }).then(res => {

    // 将响应数据转换为 Blob 对象
    const blob = new Blob([res]);
    // 创建链接进行下载
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = '课程大纲.docx';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

  })
    .catch(err => {
      console.error(err);
      // 登录请求失败后的操作
    });
}
</script>